<template>
  <div>
    <el-table :data="list">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" class="demo-table-expand">
            <el-form-item label="店铺名称">
              <span>{{ props.row.name }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="店铺介绍">
              <span>{{ props.row.desc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column
        v-for="(item, index) in tableHeader"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      >
      </el-table-column>

      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="handleAdd"
            >添加商品</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <Modal :formData="form" :visible="showModal" @onClose="showModal = false" @onConfirm="handleConfirm"></Modal>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations } from "vuex";
import Modal from '../../components/Modal.vue'
export default {
  data() {
    return {
      // 表头数据
      tableHeader: [
        {
          label: '店铺名称',
          prop: 'name', // 对应接口里的字段
        },
        {
          label: '店铺地址',
          prop: 'address',
        },
        {
          label: '店铺介绍',
          prop: 'desc',
        }
      ],
      search: '',
      showModal: false,
      form: {
        name: '',
        address: '',
        desc: '',
        id: '',
      },
      type: 'add',
    }
  },
  components: {
    Modal,
  },
  methods: {
    ...mapActions(['getList']),
    ...mapMutations(['delete', 'addItem', 'editItem']),
    // 删除
    handleDelete(id) {
      this.delete(id)
    },
    // 点击表格里的编辑按钮
    handleEdit(index, row) {
      this.type = 'edit' // 区分点击的是编辑按钮，还是添加按钮
      this.showCustomModal() // 是否展示弹窗
      this.form = row // 把当前行的数据赋值到form，用于首次展示输入框的默认值
    },
    // 点击添加按钮
    handleAdd() {
      this.type = 'add' // 区分点击的是编辑按钮，还是添加按钮
      this.showCustomModal() // 是否展示弹窗
    },
    // 点击弹窗的确认按钮
    handleConfirm() {
      // 判断是新增弹窗上的确认，还是编辑弹窗的确认
      if (this.type === 'add') {
        this.addItem({
          ...this.form,
          id: Date.now()
        })
      } else {
        this.editItem(this.form)
      }
      // 隐藏弹窗
      this.hideCustomModal()
    },
    // 是否展示弹窗
    showCustomModal() {
      this.showModal = true
    },
    // 隐藏弹窗并重置数据
    hideCustomModal() {
      this.showModal = false
      this.resetForm()
    },
    // 数据重置
    resetForm() {
      this.form = {
        name: '',
        address: '',
        desc: '',
        id: '',
      }
    },
  },
  computed: {
    ...mapState(['list'])
  },
  mounted() {
    this.getList()
  },
}
</script>

<style>
</style>